import React, { useState } from 'react';
import { Form, Input, Modal, Radio, Select } from 'antd';
import { validatorIpPort } from '@/utils/utils';
const { Option } = Select;

const FormItem = Form.Item;

export interface UpdateFormProps {
  onCancel: () => void;
  onSubmit: (values: API.DriverItem,resetForm: () => void) => void;
  updateModalVisible: boolean;
  values:  API.DriverItem;
 
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};


const commandPortList=[];
for (var i=1;i<17;i++) {
  commandPortList.push("COM"+i);
}
const baudRateList=[4800,9600,14400,19200,38400];

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals] = useState<API.DriverItem>(props.values);
  const [driverType,setDriverType] = useState<number>(formVals.driverType);

  
  const [form] = Form.useForm();

  const { updateModalVisible, onSubmit: handleUpdate,  onCancel} = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.id = formVals.id;
    console.log(fieldsValue)
   
    handleUpdate(fieldsValue,resetForm);
  };

  const resetForm= async () => {
    form.resetFields();
  };


  
  return (
    <Modal
      width={640}
     
      destroyOnClose
      title="编辑设备变量"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
       <Form
        {...formLayout}
        form={form}
        initialValues={formVals}
      >
        <FormItem
          label="驱动名称"
          name="name"
          rules={[{ required: true , message: '请选择驱动名称'}]}
        >
           <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="驱动类型"
          name="driverType"
        >
          <Radio.Group  onChange={(e)=>{setDriverType(e.target.value)}}>
            <Radio value={0} >
              网口  
            </Radio>
            <Radio value={1}>
              串口
            </Radio>
          </Radio.Group>
        </FormItem>
      {driverType==1?
        <div>
          <FormItem
            label="串口号"
            name="commandPort"
            rules={[{ required: true, message: '请选择串口号！'}]}
          >
            <Select placeholder="请选择">
              { commandPortList.map((item) => (
                <Option key={item} value={item}>
                  {item}
                </Option>
              ))
          }
            </Select>
          
          </FormItem>
          <FormItem
            label="波特率"
            name="baudRate"
            rules={[{ required: true, message: '请选择串口号！' }]}
          >
            <Select placeholder="请选择">
              { baudRateList.map((item) => (
                <Option key={item} value={item}>
                  {item}
                </Option>
              ))
             }
            </Select>
          </FormItem>
          <FormItem
            label="数据位"
            name="dataBits"
          >
            <Select placeholder="请选择数据位">
                <Option key={7} value={7}>7</Option>
                <Option key={8} value={8}>8</Option>
            </Select>
          </FormItem>
          <FormItem
            label="停止位"
            name="stopBits"
          >
            <Select placeholder="请选择停止位">
                <Option key={1} value={1}>1</Option>
                <Option key={2} value={2}>2</Option>
            </Select>
          </FormItem>
          <FormItem
            label="校验位"
            name="parity"
          >
             <Select placeholder="请选择校验位">
                <Option key={1} value={1}>奇</Option>
                <Option key={2} value={2}>偶</Option>
                <Option key={0} value={0}>无</Option>
            </Select>
          </FormItem>
        </div>
        :
        <FormItem
          label="ip和端口"
          name="ipport"
          style={{display:driverType==0?'flex':'none'}}
          rules={[{ required:true, message: '请输入ip和端口！'},{ validator: validatorIpPort }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
      }
      </Form>
    </Modal>
  );
};

export default UpdateForm;
